$prefix-cls: "login";

.#{$prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  background-color: var(--bg-color);

  .login-header {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 15px;
  }

  .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 460px;
    padding: 40px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: var(--box-shadow);

    .form-title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 20px;
    }

    .third-party-login {
      display: flex;
      justify-content: center;
      width: 100%;

      * {
        margin: 0 10px;
        color: $icon-color;
        cursor: pointer;
      }
    }
  }
}
